<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	template="/WEB-INF/template/template.xhtml">

	<ui:define name="conteudo">

		<h:form prependId="false" id="form">

			<p:growl id="msgs" showDetail="true" />

			<p:panel header="Selecione uma opção" style="margin-bottom:10px;">
				
				<h:panelGrid columns="2" cellpadding="10">
				
				<p:outputLabel for="selecione" value="Selecione o Cliente:"/>
				<p:selectOneMenu id="selecione" >
					<f:selectItem itemLabel="Selecionar Cliente" />
					<f:selectItems value="#{clienteBean.clientes}"	var="c" itemValue="#{c.idCliente}" itemLabel="#{c.nome}" />
				</p:selectOneMenu>

				
					<p:outputLabel for="opcao" value="Escolha uma opção:" />
					<p:selectOneMenu id="opcao" value="#{filmeBean.tipo}">
						<f:selectItem itemValue="" itemLabel="Selecionar Opção" />
						<f:selectItem itemLabel="pagamento" itemValue="pagamento" />
						<f:selectItem itemLabel="locacao" itemValue="locacao" />
						<f:ajax event="change" render="@form" proces="@this">
						</f:ajax>
					</p:selectOneMenu>

				</h:panelGrid>

				<p:separator />



			</p:panel>

			<p:panel header="Realizar Pagamento" style="margin-bottom:10px;"
				rendered="#{filmeBean.tipo eq 'pagamento'}" id="pagamento">

				<h:panelGrid columns="2" cellpadding="5">
					<p:outputLabel for="nomeFilme" value="Filme"/>
					<p:inputText id="nomeFilme" itemValue="nomeFilme" itemLabel="#{filmeBean.filme.nome}" />
					
					<p:outputLabel for="valorFilme" value="Valor do Filme:" />
					<p:inputText id="valorFilme" value="R$" />


					<p:outputLabel for="calendar" value="Data de Devolução:" />
					<p:calendar id="calendar" value="#{calendarView.date8}"
						effect="fold" />



					<p:commandButton value="Cancelar Pagamento" />
					<p:commandButton value="Quitar Pagamento" />

				</h:panelGrid>



				<p:separator />

			</p:panel>


			<p:panel header="Efetuar Aluguel" style="margin-bottom:10px;"
				rendered="#{filmeBean.tipo eq 'locacao'}" id="locacao">

				<h:panelGrid columns="2" cellpadding="5">
					
					<p:outputLabel for="filme" value="Escolha o filme" />
					<p:selectOneMenu id="filme">
						<f:selectItem itemLabel="Selecionar filme" />
						<f:selectItems value="#{filmeBean.filmes}" var="f" itemLabel="#{f.nome}" itemValue="#{f.idfilme}" />	
										

					</p:selectOneMenu>
					
					<p:outputLabel for="valorAluguel" value="Valor do Filme:" />
					<p:inputText id="valorAluguel" />


					<p:outputLabel for="dtLocacao" value="Data de locação:" />
					<p:calendar id="dtLocacao" value="#{calendarView.date8}"
						effect="fold" />

					<p:outputLabel for="dtEntrega" value="Data de Entrega:" />
					<p:calendar id="dtEntrega" value="#{calendarView.date8}"
						effect="fold" />



					<p:commandButton value="Cancelar Aluguel" />
					<p:commandButton value="Confirmar Aluguel" />

				</h:panelGrid>



				<p:separator />

			</p:panel>

		</h:form>


	</ui:define>
</ui:composition>
